import { Breadcrumb, Layout } from 'antd';
import React, { useState } from 'react';
import {Outlet} from 'react-router-dom';
import MenuComp  from '@/components/MainMenu';
const { Content, Footer, Sider } = Layout;


const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
 
  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="logo" />
        <MenuComp />
      </Sider>
      {/* 右边布局 */}
      <Layout className="site-layout">
        {/* 右边头部 */}
        {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
        {/* 右边主要内容 */}
        <Content style={{ lineHeight: '64px' }}>
          {/* 面包屑 */}
          <Breadcrumb style={{ margin: '16px 0',paddingLeft: '16px' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ margin:'0 16px', minHeight: "100%"}}>
              <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};


export default Home